<template>
	<view class="list">
		<view class="fixbg" :style="{backgroundImage:'url('+list.coverImgUrl+')'}"/>
		<musicHead title="歌单" :icon="true" color="white"/>
			<view class="container">
				<scroll-view scroll-y="true" >
					<view class="listHead">
						<view class="listHeadImg">
							<image :src="list.coverImgUrl" mode=""></image>
							<text class="iconfont iconyousanjiao">{{$filters.formatCount(list.playCount)}}</text>
						</view>
						<view class="listHeadText">
							<view>
								{{list.name}}
							</view>
							<view>
								<image :src="list.creator.avatarUrl" mode=""></image>
								{{list.creator.nickname}}
							</view>
							<view>
								{{list.description}}
							</view>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" class="listShare">
						<text class="iconfont iconicon-" />
						分享给微信好友
					</button>
					<!-- #endif -->
					<view class="listMusic">
						<view class="listMusicHead">
							<text class="iconfont iconbofang1"></text>
							<text>播放全部</text>
							<text>（共{{list.trackCount}}首）</text>
						</view>
						<view class="listMusicItem" v-for="(i,index) in list.tracks" :key="i.id" @tap="handleToDetail(i.id)">
							<view class="listMusicTop">{{index+1}}</view>
							<view class="listMusicSong">
								<view>{{i.name}}</view>
								<view>
									<image v-if="privileges[index].flag!==260" src="http://localhost:5173/static/dujia.png" mode=""></image>
									<image v-if="privileges[index].maxbr===999000" src="http://localhost:5173/static/sq.png" mode=""></image>
									{{i.ar[0].name}}-{{i.name}}
								</view>
							</view>
							<text class="iconfont iconbofang"></text>
						</view>
					</view>
				</scroll-view>
			</view>
	</view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import musicHead from '@/components/musicHead/musicHead.vue'
import {getTopListDetail} from '@/services/api'
import {topListDetailResult,listItem} from '@/services/interface'
import {useStore} from '../../stores/index'
interface optionItem{
	listId:number
}
const list= ref<listItem>({
	coverImgUrl:'',
	creator:{
		avatarUrl:'',
		nickname:''
	},
	playCount:0,
	name:'',
	description:'',
	trackCount:0,
	tracks:[],
	trackIds:[]
})
interface privilegesItem{
	flag:number,
	maxbr:number
}
const privileges = ref<privilegesItem[]>([
	{
		flag:0,
		maxbr:0
	}
])

const store = useStore()

const handleToDetail = (id:number) =>{
	uni.navigateTo({
		url:'/pages/detail/detail?id=' + id
	})
}

onLoad((option:optionItem)=>{
	uni.showLoading({
		title:'正在加载...',
	})
	getTopListDetail(option.listId).then((res:topListDetailResult)=>{
		if(res.data.code===200){
			list.value = res.data.playlist
			privileges.value = res.data.privileges
			store.topListIds = res.data.playlist.trackIds
			uni.hideLoading()
			console.log('pre---',res.data.privileges);
			console.log('play---',res.data.playlist);
		}
	})
})
</script>

<style scoped lang="scss">
.list{
	width: 100%;
	height: 100%;
}
.listHead{
	display: flex;
	margin: 0 30rpx;
	.listHeadImg{
		position: relative;
		width: 264rpx;
		height: 264rpx;
		border-radius: 30rpx;
		overflow: hidden;
		margin-right: 42rpx;
		image{
			width: 100%;
			height: 100%;
		}
		text{
			position: absolute;
			right: 8rpx;
			top: 8rpx;
			color: white;
			font-size:26rpz;
		}
	}
	.listHeadText{
		flex: 1;
		color: #f0f2f7;
		view:nth-child(1){
			color: white;
			font-size: 34rpx;
		}
		view:nth-child(2){
			display: flex;
			align-items: center;
			margin: 20rpx 0;
			font-size: 24rpx;
			image{
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				margin-right: 14rpx;
			}
		}
		view:nth-child(3){
			line-height: 32rpx;
			font-size: 22rpx;
		}
	}
}
.listShare{
	width: 330rpx;
	height: 74rpx;
	margin:20rpx auto;
	background: rgba(0, 0, 0, 0.4);
	color: white;
	border-radius: 37rpx;
	text-align: center;
	line-height: 74rpx;
	font-size: 28rpx;
	text{
		margin-right: 16rpx;
	}
}
.listMusic{
	margin-top: 40rpx;
	background-color: #fff;
	border-radius: 50rpx;
	overflow: hidden;
	.listMusicHead{
		height: 50rpx;
		margin: 30rpx 0 70rpx 22rpx;
		text:nth-child(1){
			height: 50rpx;
			font-size: 50rpx;
		}
		text:nth-child(2){
			margin: 0 10rpx 0 26rpx;
			font-size: 30rpx;
		}
		text:nth-child(3){
			font-size: 26rpx;
			color: #b2b2b2;
		}
	}
	.listMusicItem{
		display: flex;
		align-items: center;
		margin: 0 32rpx 66rpx 46rpx;
		color: #959595;
		text{
			font-size: 50rpx;
			color: #c7c7c7;
		}
	}
	.listMusicTop{
		width: 58rpx;
		font-size: 30rpx;
		line-height: 50rpx;
	}
	.listMusicSong{
		flex: 1;
		view:nth-child(1){
			font-size: 28rpx;
			width: 70vw;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: black;
		}
		view:nth-child(2){
			align-items: center;
			font-size: 20rpx;
			width: 70vw;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			image{
				margin-right: 10rpx;
				width: 32rpx;
				height: 20rpx;
			}
		}
	}
}
</style>
